<template>
<h3>数组变化侦听</h3>
<!-- 有三个方法是返回新数组，而不是在原有数组上修改 -->
<!-- 分别是fillter, concat, slice -->
<button @click="mergeArray1">合并数组</button>
<div></div>
<button @click="mergeArray2">增加一个元素</button>
<h3>数组1</h3>
<p v-for="(item, index) in array1" :key="index"> {{ item }}</p>
<h3>数组2</h3>
<p v-for="(item, index) in array2" :key="index"> {{ item }}</p>
</template>

<script>

export default{
    data(){
        return{
            array1:[1,2,3,4,5],
            array2:[6,7,8,9,10]
        }
    },
    methods:{
        mergeArray1(){
            // this.array1.concat(this.array2) 不会直接引起ui更新，所以不会直接显示
            // 需要自己给原来的数组赋值
            this.array1 = this.array1.concat(this.array2);
        },
        mergeArray2(){
            // 会引起ui自动更新，不用手动赋值
            this.array1.push("6")
        }
    }
}

</script>